<template>

<!--  <dv-full-screen-container>-->
  <!--  <custom-border :border-img="require('@/assets/images/border.png')">-->
  <div class="tabs">
    <custom-tabs
        :data="tabDataList"
        :index.sync="tabIndex"
        :li-bg-img="require('@/assets/images/tab.png')"
        :li-active-bg-img="require('@/assets/images/tab_active.png')"
        width="204px"
        height="50px"
    >
    </custom-tabs>
    <div class="tab-text">
      <div v-for="(item,index) in dataList" :key="index" >
        <div v-show="tabIndex === index" class="tab-item">
          <span class="tab-item-tip">
            {{item.tip}}
          </span>
          <div class="tab-item-into">
            <div v-for="(into,i) in item.intrData" :key="i" class="item">
              <div class="left">{{into.title}}</div>
              <div class="right">{{into.content}}</div>
            </div>
          </div>
          <animation-timeline :data="item.processData" :line-length="item.lineLength" line-color="#7689BEFF">
          </animation-timeline>

        </div>
      </div>
    </div>
  </div>
  <!--  </custom-border>-->
<!--  </dv-full-screen-container>-->


</template>

<script>
import CustomBorder from "@/components/CustomBorder/CustomBorder";
import CustomTabs from "@/components/CustomTabs/CustomTabs";
import AnimationTimeline from "@/components/AnimationTimeline/AnimationTimeline";
export default {
  name: "FinancialService",
  components: {AnimationTimeline, CustomTabs, CustomBorder},
  data() {
    return {
      tabDataList:[
        {
          title:'应收账款',
        },
        {
          title:'订单',
        },
        {
          title:'货物',
        }
      ],
      tabIndex:0,
      dataList:[
        {
          tip:'助力供应商应收账款快速变现',
          intrData:[
            {
              title:'便',
              content:'线上申请\n质押+转让\n在线确权'
            },
            {
              title:'捷',
              content:'审核快捷\n在线签约\n快速放款'
            },
            {
              title:'省',
              content:'节省确权时间\n综合成本降低'
            }
          ],
          lineLength:'97px',
          processData:[
            {
              title:'借贷方',
              remark:'申请'
            },
            {
              title:'核心企业',
              remark:'确权'
            },
            {
              title:'平台',
              remark:'审批'
            },
            {
              title:'银行',
              remark:'摘牌'
            },
            {
              title:'借贷方',
              remark:'签约'
            },
            {
              title:'银行',
              remark:'结算'
            },
            {
              title:'借贷',
              remark:'结算'
            }
          ]
        },
        {
          tip:'降低借贷门槛，为订单提供资金支持',
          intrData:[
            {
              title:'低',
              content:'订单借贷\n信誉变现\n降低准入'
            },
            {
              title:'快',
              content:'审核快速\n线上签约\n直接放款'
            },
            {
              title:'益',
              content:'低成本借贷方式\n增强企业效益'
            }
          ],
          lineLength:'119px',
          processData:[
            {
              title:'借贷方',
              remark:'申请'
            },
            {
              title:'平台',
              remark:'审批'
            },
            {
              title:'银行',
              remark:'摘牌'
            },
            {
              title:'借贷方',
              remark:'签约'
            },
            {
              title:'银行',
              remark:'结算'
            },
            {
              title:'借贷',
              remark:'完成'
            }
          ]
        },
        {
          tip:'以货物作为抵押，为拥有物权企业提供资金',
          intrData:[
            {
              title:'易',
              content:'线上申请\n抵押办理\n快速放款'
            },
            {
              title:'活',
              content:'抵押借贷\n盘活资金\n加快交易'
            },
            {
              title:'惠',
              content:'借贷利率极低\n降低成本\n规避风险'
            }
          ],
          lineLength:'119px',
          processData:[
            {
              title:'借贷方',
              remark:'申请'
            },
            {
              title:'平台',
              remark:'审批'
            },
            {
              title:'银行',
              remark:'签约'
            },
            {
              title:'银行',
              remark:'办理抵质登记'
            },
            {
              title:'平台',
              remark:'结算'
            },
            {
              title:'借贷',
              remark:'完成'
            }
          ]
        }
      ]
    }
  },
}
</script>

<style scoped>
/*#dv-full-screen-container {*/
/*  background-image: url("@/assets/images/bg.png");*/
/*  background-size: 100% 100%;*/
/*}*/
.tabs{
  width: 775px;
  height: 520px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 30px 0;
}
.tabs .tab-text .tab-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}
.tabs .tab-text .tab-item .tab-item-tip{
  background: rgba(255, 255, 255,0.11);
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 500;
  color: #00F0FF;
}
.tabs .tab-text .tab-item .tab-item-into{
  display: flex;
  flex-direction: row;
  gap:40px ;
}
.tabs .tab-text .tab-item .tab-item-into .item{
  display: flex;
  gap: 24px;
}
.tabs .tab-text .tab-item .tab-item-into .item .left{
  background-image: url("@/assets/images/tab_bg.png");
  width: 86px;
  height: 75px;
  line-height: 75px;
  font-size: 32px;
  font-weight: 500;
  color: #5FEEF7;
}
.tabs .tab-text .tab-item .tab-item-into .item .right{
  white-space: pre-line;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 25px;
}
</style>
